<script setup>
import { ref, onMounted } from "vue";

const msg = ref("loading...");
const msg1 = ref("loading...");

async function fetchHello() {
  try {
    const res = await fetch("/api/hello");
    if (!res.ok) throw new Error(`HTTP ${res.status}`);
    const data = await res.json();
    msg.value = data.message;
  } catch (err) {
    msg.value = `请求失败: ${err}`;
  }
}

async function fetchGoodbye() {
  try {
    const res = await fetch("/api/goodbye");
    if (!res.ok) throw new Error(`HTTP ${res.status}`);
    const data = await res.json();
    msg1.value = data.message;
  } catch (err) {
    msg1.value = `请求失败: ${err}`;
  }
}

async function fetchTest() {
  try {
    const res = await fetch("/api/test");
    if (!res.ok) throw new Error(`HTTP ${res.status}`);
    const data = await res.json();
    msg1.value = data.message;
  } catch (err) {
    msg1.value = `请求失败: ${err}`;
  }
}

onMounted(fetchHello);
</script>

<template>
  <div>
    <div class="api-demo">
      <p>后端返回：{{ msg }}</p>
      <button @click="fetchHello">重新请求</button>
    </div>
    <p style="font-size: 12px; color: #888">
      通过 Vite 代理调用 FastAPI: GET /api/hello
    </p>
    <div class="api-demo">
      <p>新的请求：{{ msg1 }}</p>
      <button @click="fetchGoodbye">新的请求：</button>
    </div>
    <div class="api-demo">
      <p>新的请求11：{{ msg1 }}</p>
      <button @click="fetchTest">新的请求11：</button>
    </div>
  </div>
</template>

<style scoped>
.api-demo {
  margin-top: 1rem;
}
button {
  padding: 6px 12px;
}
</style>
